<template>
  <div class="search">
    <!-- 输入框 -->
    <!-- <div class="inputContainer">
      <img src="@/assets/icon/search.png" />
      <input type="text" v-model="inputValue" placeholder="请输入" id="input" />
    </div> -->
    <!-- 输入按钮 -->
    <!-- <button @click="submit">
      <img src="@/assets/icon/confrim.png" />
    </button> -->
  </div>
</template>
    
<script>
/*eslint-disable*/
import { getCurrentInstance, onMounted } from "vue";
import { ElMessage } from "element-plus";
import pubsub from "pubsub-js";

import mainApi from "@/api/mainApi";

export default {
  name: "搜索",
  data() {
    return {
      inputValue: "",
    };
  },
  setup() {
    const { proxy } = getCurrentInstance();

    onMounted(() => {
      // submit();
      // document.querySelector("#input").addEventListener("keydown", (e) => {
      //   if (e.key === "Enter") submit();
      // });
    });

    // 读取所有mod的文件名
    function readModName(fun) {
      // 读取文件仓库中的文件
      mainApi.readJson(ElMessage, (data) => {
        // 文件仓库路径
        let folderPath = data.fileHouse;
        let fs = window.myApi.fs;
        let path = window.myApi.path;

        if (!fs.existsSync(folderPath)) {
          console.log("文件夹不存在:", folderPath);
          mainApi.writeDailyLog("文件夹不存在:" + folderPath + "--search.vue");
          return;
        }

        let modList = [];
        // mod大类文件夹名
        let files = fs.readdirSync(folderPath);
        files.splice(files.length - 1, files.length);
        // console.log(files);
        files.forEach((file) => {
          // mod文件夹名
          let modFolderPath = path.join(folderPath, file);
          mainApi.writeDailyLog(
            "mod文件夹名:" + modFolderPath + "--search.vue"
          );
          fs.readdirSync(modFolderPath).forEach((mod) => {
            if (file === "logo" || file === "temp" || file === "catalogue")
              return;
            // 载入数组（类型、mod）
            modList.push({ type: file, modName: mod });
          });
        });
        // 回调使用mod列表
        fun(modList);
      });
    }

    // 执行查询
    function submit() {
      readModName((modList) => {
        // mod列表
        let dataList = [];
        // 读取关键字
        let keyWord = proxy.inputValue;
        mainApi.writeDailyLog("查询关键字:" + keyWord + "--search.vue");
        // 匹配mod类型与mod名字
        let index = 0;
        new Promise((res, rej) => {
          modList.forEach((mod) => {
            if (mod.modName.indexOf(keyWord) != -1) {
              dataList.push(mod);
            }
            index++;
            if (index === modList.length) res();
          });
        }).then(() => {
          // 查询结果为空
          if (dataList.length === 0) {
            ElMessage("查询结果为空");
            return;
          }
          // 传输至搜索结果页面
          pubsub.publish("routerChange", {
            targetComponent: "searchResult",
            linkName: "searchResult",
            componentName: "searchResult",
            origin_nav: "home",
            isNav: false,
            dataList,
          });
        });
      });
    }

    return { submit };
  },
};
</script>
    
<style lang="less" scoped>
@import "../less/variables.less";
.search {
  display: flex;
  align-items: center;
}
.inputContainer {
  width: 350px;
  display: inline-block;
  border: #b4b4b4 1px solid;
  box-shadow: @box-shadow;
  border-radius: 5px;
  padding: 0% 2%;
  margin: 3%;
  margin-left: 10%;
  > * {
    display: inline-block;
    vertical-align: middle;
  }
  > img {
    // border: @border;
    max-width: 35px;
    width: 7.5%;
    margin-left: 3%;
  }
  > input {
    border: transparent;
    // border: @border;
    outline: none;
    background-color: transparent;
    font-size: 100%;
    padding: 3%;
    padding-right: 0;
    color: #5d5d5d;
    overflow: hidden;
    width: 75%;
  }
}
button {
  display: flex;
  outline: none;
  background-color: transparent;
  border: #b4b4b4 1px solid;
  box-shadow: @box-shadow;
  border-radius: 5px;
  padding: 2% 1.2%;
  > img {
    width: 20px;
  }
}

button:hover,
.inputContainer:hover {
  border: 1px solid @red;
  box-shadow: 2px 2px 2px 0.1px rgba(252, 61, 73, 0.2);
}
</style>
    